<template>
  <div class="cart-container">
    <van-nav-bar title="购物车" @click-right="onClickRight">
      <template #right>
        <div class="acount-num">总计{{ goodsCount }}件商品</div>
      </template>
    </van-nav-bar>
    <compTips></compTips>
    <div v-for="item in cartList" :key="item.id" class="cart-item">
      <van-checkbox-group v-model="result">
        <van-checkbox
          class="checkbox"
          :name="item.id"
          :disabled="isEditing"
          @click="checkedStatusChange(item.checked, item.product_id)"
        >
        </van-checkbox>
      </van-checkbox-group>
      <van-swipe-cell>
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :origin-price="item.market_price"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
          @click="gotoDetail(item.goods_id)"
        />
        <van-stepper
          v-model="item.number"
          v-if="isEditing"
          @change="stepperChange(item)"
        />

        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="delGoods(item.product_id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar
      :price="checkedGoodsAmount"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip>
        已选{{ checkedGoodsCount }}件，点击
        <van-button
          class="edit"
          :type="isEditing ? 'danger' : 'primary'"
          size="mini"
          @click="editBtn"
          >{{ isEditing ? "完成编辑" : "编辑" }}</van-button
        >修改商品数量
      </template>
    </van-submit-bar>
    <compTabbar></compTabbar>
  </div>
</template>

<script>
import {
  getCartData,
  toggleCheckedStatus,
  updataGoodsNumber,
  delGoods,
} from "@/request/api";
import compTabbar from "@/components/compTabbar.vue";
import compTips from "@/components/compTips";
export default {
  components: {
    compTabbar,
    compTips,
  },
  data() {
    return {
      //result是展示选中元素的数组
      result: [],
      isEditing: false,
      // checkedAll: false,
      cartList: [],
      checkedGoodsCount: 0,
      goodsCount: 0,
      goodsAmount: 0,
      checkedGoodsAmount: 0,
    };
  },
  computed: {
    checkedAll: {
      // return this.checkedGoodsCount == this.goodsCount;
      // console.log(this.result.length);
      // console.log(this.cartList.length);
      get() {
        return this.result.length == this.cartList.length;
      },
      set(val) {
        let ids_arr = [];
        this.cartList.map((v) => {
          ids_arr.push(v.product_id);
        });
        toggleCheckedStatus({
          isChecked: val ? 1 : 0,
          productIds: ids_arr.join(),
        }).then((res) => {
          if (res.errno == 0) {
            this.handleData(res);
          }
        });
      },
    },
  },
  methods: {
    //删除购物车商品
    delGoods(productIds) {
      delGoods({
        productIds: productIds.toString(),
      }).then((res) => {
        console.log(res);
        if (res.errno == 0) {
          this.handleData(res);
        }
      });
    },
    //修改商品数量时
    stepperChange(item) {
      console.log(item.number);
      updataGoodsNumber({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          this.handleData(res);
        }
      });
    },
    //点击编辑按钮
    editBtn() {
      this.isEditing = !this.isEditing;
    },
    onClickRight() {
      this.$router.push("/home/popup");
    },
    gotoDetail(id) {
      this.$router.push("/detail?gid=" + id);
    },
    //选中状态改变
    checkedStatusChange(checked, product_id) {
      if (this.isEditing) return;
      if (checked == 1) {
        checked = 0;
      } else {
        checked = 1;
      }
      toggleCheckedStatus({
        isChecked: checked,
        productIds: product_id,
      }).then((res) => {
        if (res.errno == 0) {
          this.handleData(res);
        }
      });
    },
    handleData(res) {
      let {
        cartList,
        cartTotal: {
          goodsCount,
          checkedGoodsCount,
          goodsAmount,
          checkedGoodsAmount,
        },
      } = res.data;
      this.cartList = cartList;
      this.checkedGoodsCount = checkedGoodsCount;
      this.goodsCount = goodsCount;
      this.goodsAmount = goodsAmount * 100;
      this.checkedGoodsAmount = checkedGoodsAmount * 100;
      this.result = [];
      cartList.map((v) => {
        v.checked == 1 ? this.result.push(v.id) : "";
      });
    },
    onSubmit() {},
    onClickEditAddress() {},
  },
  activated() {
    getCartData().then((res) => {
      if (res.errno == 0) {
        this.handleData(res);
      }
    });
  },
  created() {},
};
</script>

<style lang="less" scoped>
.cart-container {
  padding-bottom: 140px;
}
.cart-item {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  padding: 8px;
  border-bottom: 1px solid #eee;
}
/deep/.van-checkbox.checkbox {
  height: 50px;
  width: 20px;
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-swipe-cell {
  width: 100%;
}
.van-submit-bar {
  position: fixed;
  bottom: 60px;
  left: 0;
}
.acount-num {
  color: #fc5132;
}
/deep/.van-button.edit {
  line-height: 1.5;
}
.van-submit-bar__tip {
  line-height: 1.5;
}
.van-stepper {
  text-align: right;
}
.van-button--square {
  height: 100%;
}
</style>